import { createBehavior, createResource } from '@inbiz/core';
import {
  createInbizSchema,
  createBaseSchema,
  createValidatorSchema,
  createComponentStyleSchema,
  createDecoratorStyleSchema,
  createModelSchema,
  createSoureSchema,
  createComponentLayout,
  createControllerSchema,
} from '@inbiz/setters';
import ConfigModal from './components/configModal';
import { Transfer as LocaleTransfer } from './locale';

export const defaultProps = {
  leftTitle: 'Transfer.waitList',
  rightTitle: 'Transfer.donwList',
  pageSize: 10,
  showPagination: false,
  showSearch: false,
  configModalValue: {
    type: 'list', // list 为表格和列表，tree 为树
    currentIdField: '', // id
    parentIdField: '', // parentid
    labelField: '', // name
    searchKey: '', // name
    fieldOptions: [
      // { key: 1, field: 'name', label: '名称' },
      // { key: 2, field: 'path', label: '路径' },
    ], // 一条数据为列表，多条数据为表格
  },
};

export const propsSchema = createInbizSchema({
  attribute: {
    ...createBaseSchema({
      leftTitle: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'MultilingualInput',
      },
      rightTitle: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'MultilingualInput',
      },
      showPagination: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
      },
      pageSize: {
        type: 'number',
        'x-decorator': 'FormItem',
        'x-component': 'NumberPicker',
        'x-reactions': {
          dependencies: ['.showPagination'],
          fulfill: {
            state: {
              visible: '{{$deps[0] === true}}',
            },
          },
        },
        'x-component-props': {
          defaultValue: 10,
          precision: 0,
        },
      },
      showSearch: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
      },
      // businessData: {
      //   type: 'object',
      //   'x-decorator': 'FormItem',
      //   'x-component': (props: any) => {
      //     return <SubtableConfigModal {...props} />;
      //   },
      // },
      configModalValue: {
        type: 'object',
        'x-decorator': 'FormItem',
        'x-component': (props: any) => {
          return <ConfigModal {...props} />;
        },
        'x-reactions': {
          dependencies: ['form.senior.soure.sourceModelUpdate'],
          fulfill: {
            schema: {
              //@ts-ignore
              'x-component-props.update': '{{$deps[0]}}',
            },
          },
        },
      },
    }),
    ...createValidatorSchema(),
  },
  style: {
    ...createComponentStyleSchema(),
    ...createComponentLayout(),
    ...createDecoratorStyleSchema(),
  },
  senior: {
    ...createModelSchema({
      childModelConfig: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
      },
      storageConfig: {
        type: 'object',
        'x-decorator': 'FormItem',
        'x-component': 'StorageConfig',
        'x-component-props': {
          type: 'transfer',
        },
        'x-reactions': {
          dependencies: ['.childModelConfig'],
          fulfill: {
            state: {
              visible: "{{$deps == 'true'}}",
            },
          },
        },
      },
    }),
    ...createSoureSchema(),
  },
  controller: createControllerSchema({
    events: [
    {
      name: "onSuccess",
      label: "请求成功",
      platform: 'web'
    },
    {
      name: "onError",
      label: "请求失败",
      platform: 'web'
    },
    {
      name: "onSelect",
      label: "选中事件",
      platform: 'web'
    },
    {
      name: "onSelectChange",
      label: "选中/取消选中事件",
      platform: 'web'
    }]
  })
});

export const Behavior = createBehavior({
  name: 'Transfer',
  extends: ['Field'],
  selector: (node) => node.props?.['x-component'] === 'Transfer',
  designerLocales: LocaleTransfer,
  designerProps: { propsSchema },
});

export const Resource = createResource({
  icon: 'ShuttleBox',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'array',
        title: {
          value: 'Transfer.title',
          status: true,
        },
        'x-component': 'Transfer',
        'x-decorator': 'FormItem',
        'x-decorator-props': {
          style: {
            height: '420px',
          },
        },
        'x-component-props': defaultProps,
      },
    },
  ],
});
